<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<label >id:
				<input type="text" v-model="id" /></label>
			
			
				<label >name:
				<input type="text" v-model="name" /></label>
				<input type="button"  value="添加" @click="add()"/>
			</div>
			<!-- 注意：v-for循环的时候，key属性只能使用number或string -->
			<!-- 注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 -->
			<!-- 在组件中使用v-for循环的时候，如果v-for有问题，必须指定唯一字符串或数字的key值强调关联性
				帮助Vue区分不同的元素
			 -->
			<p v-for="item in list" v-bind:key="item.id">
				<input type="checkbox"  />{{item.id}}{{item.name}}
			</p>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					list:[
						{id:1,name:'李斯'},
						{id:2,name:'嬴政'},
						{id:3,name:'赵高'},
						{id:4,name:'韩非'},
						{id:5,name:'荀子'}
					]
				},
				methods:{
					add(){/* 添加方法 */
					var reg =/^[0-9]*[1-9][0-9]*$/;
					
						var res = this.list.some(item => {
							
							if(item.id == this.id || this.id == '' || !reg.test(this.id)){
							
								return true;
							}
							
						
						})
						
						if(!res){
							/* 没有用key，只记住索引，会有bug */
							//  this.list.unshift({id:this.id,name:this.name}) 
							this.list.push({id:this.id,name:this.name})
						}
					}
				}
			})
		</script>
	</body>
</html>
